<template>
    <section class="setting-base">
        <div class="inner">
            <div class="draw-back">
                <Form :model="formItem" label-position="right" :label-width="70">
                    <FormItem label="昵称：">
                        <Input v-model="formItem.alipay"></Input>
                    </FormItem>
                    <FormItem label="性别：">
                        <RadioGroup v-model="formItem.radio">
                            <Radio label="0">男</Radio>
                            <Radio label="1">女</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="生日：">
                        <DatePicker type="date" placeholder="选择生日" v-model="formItem.date"></DatePicker>
                    </FormItem>
                    <FormItem label="年龄：">
                        <span>22岁</span>
                    </FormItem>
                    <FormItem label="邮箱：">
                        <Input v-model="formItem.email"></Input>
                    </FormItem>
                    <FormItem label="地区：">
                        <Select v-model="formItem.pro" style="width:110px" @on-change="selpro">
                            <Option v-for="item in proList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                        &nbsp;&nbsp;
                        <Select v-model="formItem.city" style="width:110px" @on-change="selcity">
                            <Option v-for="item in cityList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                        &nbsp;&nbsp;
                        <Select v-model="formItem.dis" style="width:110px" >
                            <Option v-for="item in disList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                        <div style="height: 10px"></div>
                        <Input v-model="formItem.address" type="textarea" :rows="4" placeholder="详细地址..." />
                    </FormItem>
                    <FormItem label="简介：">
                        <Input v-model="formItem.detail" type="textarea" :rows="4" placeholder="简介内容..." />
                    </FormItem>
                </Form>
            </div>
            <p class="tips">想让自己哪里变得更美？</p>
            <div class="selected-box">
              <span class="item"
                    :class="{active: i.check}"
                    v-for="i in want"
                    :key="i.id"
                    @click="i.check = !i.check">
                {{i.name}}
              </span>
            </div>
            <p class="tips">哪些地方做过整容？</p>
            <div class="selected-box">
              <span class="item"
                    :class="{active: i.check}"
                    v-for="i in done"
                    :key="i.id"
                    @click="i.check = !i.check">
                      {{i.name}}
              </span>
            </div>
            <div style="padding-left: 70px;">
                <Button type="primary" size="large" style="width: 100px" @click="subimt">完成</Button>
            </div>
        </div>
    </section>
</template>

<script>
    import MsgItem from '@/components/ListItem/MsgItem'
    export default {
        name: 'SettingBase',
        components: {
            MsgItem
        },
        data () {
            return {
                formItem: {},
                proList: [],
                cityList: [],
                disList: [],
                want: [
                    {id:1, name: '眼部', check: false},
                    {id:2, name: '鼻部', check: false},
                    {id:3, name: '面部轮廓', check: false},
                    {id:4, name: '唇部', check: false},
                    {id:5, name: '胸部', check: false},
                    {id:6, name: '美体塑性', check: false},
                    {id:7, name: '自体制填充', check: false},
                    {id:8, name: '玻尿酸', check: false},
                    {id:9, name: '皮肤', check: false},
                    {id:10, name: '耳部', check: false},
                    {id:11, name: '私密整形', check: false},
                    {id:12, name: '牙齿', check: false},
                    {id:13, name: '毛发种植', check: false},
                    {id:14, name: '激光脱毛', check: false},
                    {id:15, name: '韩式半永久', check: false}
                ],
                done: [
                    {id:1, name: '眼部', check: false},
                    {id:2, name: '鼻部', check: false},
                    {id:3, name: '面部轮廓', check: false},
                    {id:4, name: '唇部', check: false},
                    {id:5, name: '胸部', check: false},
                    {id:6, name: '美体塑性', check: false},
                    {id:7, name: '自体制填充', check: false},
                    {id:8, name: '玻尿酸', check: false},
                    {id:9, name: '皮肤', check: false},
                    {id:10, name: '耳部', check: false},
                    {id:11, name: '私密整形', check: false},
                    {id:12, name: '牙齿', check: false},
                    {id:13, name: '毛发种植', check: false},
                    {id:14, name: '激光脱毛', check: false},
                    {id:15, name: '韩式半永久', check: false}
                ],
                pid:0,
                city:1,
                dis:2

            }
        },
        created () {
           this.init()
           this.adrass()
           this.diss()
           this.citys()
        },
        methods: {
            subimt () {
                let _this =this
                this.$post('/api/user/userInfo',
                     {
                        token:_this.$token,
                        nickname:_this.formItem.alipay,
                        gender:_this.formItem.radio,
                        birthday:_this.formItem.date,
                        email:_this.formItem.email,
                        sheng_id:_this.formItem.pro,
                        shi_id:_this.formItem.city,
                        xian_id:_this.formItem.dis,
                        place:_this.formItem.address,
                        brief:_this.formItem.detail,
                        // intention:,
                        // done:,
                    }, function (res) {
                        _this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                    }, function (errcode, errmsg,err) {
                        console.log(errmsg)
                    })
            },
            init () {
                let _this =this
                this.$post('/api/user/getUserInfo',
                    {
                        token:_this.$token,
                    }, function (res) {
                        _this.formItem.alipay=res.data.nickname
                        _this.formItem.radio=res.data.gender
                        _this.formItem.date=res.data.birthday
                        _this.formItem.email=res.data.email
                        _this.formItem.pro=res.data.sheng_id
                        _this.formItem.city=res.data.shi_id
                        _this.formItem.dis=res.data.xian_id
                        _this.formItem.detail=res.data.brief
                        _this.formItem.address=res.data.place
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            adrass () {
                let _this =this
                this.$post('/api/common/getPlace',
                    {
                        pid:_this.pid,
                    }, function (res) {
                        _this.proList = res.data
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            diss () {
                let _this =this
                this.$post('/api/common/getPlace',
                    {
                        pid:_this.dis,
                    }, function (res) {
                        _this.disList = res.data
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            citys () {
                let _this =this
                this.$post('/api/common/getPlace',
                    {
                        pid:_this.city,
                    }, function (res) {
                        _this.cityList = res.data
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            selpro (value) {
                this.city = value
                console.log(value)
                this.citys()
            },
            selcity (value) {
                console.log(value)
                this.dis = value
                this.diss()
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../../style/style.less";
    .setting-base {
        border: 1px solid @border-color;
        border-top: 3px solid @theme-color-dark;
        padding: 15px;
        .draw-back {
            width: 450px;
        }
        .tips {
            color: #333;
            font-size: 14px;
            font-weight: bold;
        }
        .selected-box {
            padding: 10px 0;
            margin-bottom: 20px;
            .item {
                color: @theme-color-dark;
                background-color: @theme-color-light;
                font-size: 14px;
                height: 28px;
                line-height: 28px;
                display: inline-block;
                margin: 14px 18px 0 0;
                border-radius: 4px;
                padding: 0 10px;
                cursor: pointer;
            }
            .active {
                background-color: @theme-color-dark;
                color: #fff;
            }
        }
    }
</style>
